@charset "utf-8";
@import "reset";
@function r($px){
	@return $px/100px*1rem;
}
.web{
	width: r(640px);
	padding-top: r(89px);
	//padding-bottom: r(96px);
	header{
					width: r(640px);
					height: r(89px);
					background-color: #b20000;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 r(16px);
					color: white;
					position: fixed;
					top:0;
					img{
						width: r(263px);
					}
			}
	.content{
		background-color: #ffffff;
		margin: 0 r(28px);
		margin-top: r(44px);
		p:nth-of-type(1){
			font-size: 17.5px;
			font-weight: bolder;
		}
		p:nth-of-type(2){
			font-size: 15px;
			color: #C5C5C5;
			span{
				margin-left: r(20px);
			}
		}
		p:nth-of-type(3){
			color: #a6a6a6;
			font-size: 14px;
			margin-top: r(55px);
		}
		p:nth-of-type(4){
			margin-top: 14px;
			width: r(582px);
			height: r(337px);
			border-bottom: 1px solid #C5C5C5;
			padding-bottom: r(29px);
			img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.call-me{
		.text{
			margin-left: r(28px);
			margin-top: r(38px);
			font-size: 15px;
			font-weight: bolder;
			color: #8e8d8d;
		}
		.msg{
			display: flex;
			justify-content: space-between;
			height: r(150px);
			background-color: #B20000;
			margin-top: r(15px);
			div{
				width: 33%;
				font-size: 10px;
				text-align: center;
				//border-right: 1px solid white;
				//padding: r(10px) 0;
				padding-top: r(17px);
				height: r(116px);
				border-right: 1px solid white;
				margin-top: r(17px);
				font-size: r(20px);
				color: white;
				font-weight: bolder;
				p{
					i{
						font-size: 27.5px;
						color: white;
					}
				}
			}
			div:nth-of-type(3){
				border-right: none;
			}
		}
	}
	.footer_Nav{
			width:r(640px);
			height: r(96px);
			background-color: #f5f5f5;
			position: fixed;
			bottom:0;
			display: flex;
			justify-content: space-around;
			font-size: 0;
			div{
				height: 100%;
				//width: 20%;
				margin-top: r(10px);
				font-size: 10px;
				//align-items: center;
				text-align: center;
				display: block;
				color: #8b8b8b;
				p{
					text-align: center;
					i{
						font-size: 27.5px;
					}
				}	
			}
			div:nth-of-type(3){
				color: red;
			}
		}
		.search{
							width: 100%;
							height: 100%;
							background-color: #f1f1f1;
							transform: translateY(100%);
							position: fixed;
							top:0;
							left:0;
							.hotword{
								p{
									font-size: r(40px);
									margin: r(24px) r(34px);
								}
							}		
							.one{
								color:#fefcfd;
								height: r(100px);
								background-color: #1f1f1f;
								display: flex;
								justify-content: space-between;
								align-items: center;
								padding: 0 r(17px);
								font-size: r(31px);
								.search_box{
									width: r(500px);
									position: relative;
									.search_icon{
										padding-left: r(10px);
										position: absolute;
										top:r(10px);
									}
									.search_1{
										input[type="search"]{
											width: r(500px);
											height: r(58px);
											border-radius: 10px;
											border:solid #fefcfd 0.5px;
											padding-left: r(60px);
											padding-right: r(20px);
											background-color:#1f1f1f ;
											color: white;
									}
								}		
							}
						}
					    .search_world{
					    	margin-left: r(34px);
					    	margin-right: 40px;
							
					    	.line{
					    		display: flex;
					    		justify-content: space-between;
								padding: r(10px) 0;
					    		p{
					    			font-size: r(30px);
									//border: 1px solid black;
									background-color: white;
									padding: r(10px);
					    		}
					    	}
					    }
					}
		.list{
						width:100%;
						height: 100%;
						background-color: #303030;
						transform: translateX(-100%);
						position: fixed;
						top:0;
						overflow: scroll;
						.list_header{
							color:#fefcfd;
							height: r(100px);
							background-color: #21201c;
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 r(17px);
							font-size: r(31px);
							.colse{}
							.search_header{
								position: relative;
								.sousuo{
									position: absolute;
									top: r(10px);
									margin-left: 6px;
								}
								.search_input{
									
									input[type="search"]{
										width: r(500px);
										height: r(58px);
										border-radius: 10px;
										border:solid #fefcfd 0.5px;
										padding-left: r(60px);
										padding-right: r(20px);
										background-color:#1f1f1f ;
										color: white;
									}
								}
							}
						}
						hr{
							margin: 0 10px;
							border: 0.5px solid #524e4d;
						}
						.login{
							background-color: #222222;
							height: r(450px);
							position: relative;
							padding-top: r(100px);
							.login_img{
								width: r(180px);
								height: r(180px);
								border-radius: 50%;
								margin: 0 auto;
								// position: absolute;
								// top: r(100px);
								img{
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}
							.login_A{
								    width: 50%;
									margin: 0 auto;
									font-size: r(50px);
									p{
										color: white;
										text-align: center;
										a{
											font-size: r(30px);
											color: #505050;
										}
									}
							}
						}
						.operate{
							background-color: #222222;
							margin-top: r(15px);
							//height: 300px;
							.first{		
								color: white;
								font-size: r(30px);
								padding: r(20px);
								label{
									display: flex;
									justify-content: space-between;
								}		
							}	
							input{
								display: contents;
							}
							input:checked + div{
								max-height: r(200px);
								transition: all 1s;
							}
							.second{
								max-height: 0;
								overflow: hidden;
								color: white;
								font-size: r(30px);
								text-align: center;
								//padding: r(20px) 0;
								p{
									padding: r(20px) 0;
								}
							}
						}
					}
}